What are Nested Lists?

A nested list is a list placed inside another list. This is a fundamental feature of HTML that allows you to create hierarchical structures for your content, similar to an outline. You can nest either an ordered list <ol > or an unordered list <ul> inside a list item <li > of a parent list.

The browser automatically handles the indentation and styling to visually represent the nesting. For an ordered list, it might continue the numbering or use a different numbering scheme, while an unordered list might use a different bullet style.

How to Create Nested Lists

To create a nested list, you simply start a new <ul > or <ol > tag within a list item <li> of an existing list. The entire nested list block is considered part of the parent list item.

Example of an Unordered Nested List

This example shows how to list different types of tea under a main "Tea" category using an unordered list. Notice how the inner <ul> is placed inside the <li> for "Tea".

Example of an Ordered Nested List

This example demonstrates a multi-step process where one of the steps has its own sub-steps. An ordered list is used for the main steps, with another ordered list nested inside the second list item.

Tables

What are Tables?

An HTML table is used to display data in a structured way, using rows and columns. Tables are essential for presenting information like financial data, calendars, and product listings in a clear, organized format.

A table is defined by the <table> tag. It is divided into table rows (<tr>), and each row contains table data (<td>) or table headers (<th>).

Table Tags

The main tags used to build a table are:

<table>: Defines the start of the table.
<tr>: Defines a table row.
<th>: Defines a table header cell. By default, the content is bold and centered.
<td>: Defines a standard data cell.
<caption>: Defines a table caption.
<colgroup>: Specifies a group of one or more columns in a table for formatting.
<col>: Specifies column properties for each column within a <colgroup> element.
<thead>: Groups the header content in a table.
<tbody>: Groups the body content in a table.
<tfoot>: Groups the footer content in a table.

Example of a table

Colspan and Rowspan

HTML Table - Colspan

To make a cell span over multiple columns, use the colspan attribute

HTML Table - Rowspan

To make a cell span over multiple rows, use the rowspan attribute